M

MLOG

ಕನ್ನಡ

ವೆಬ್‌ಪ್ಯಾಕ್ 5 ರಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್‌ನೊಂದಿಗೆ ಮೈಕ್ರೋ-ಫ್ರಂಟೆಂಡ್‌ಗಳ ಶಕ್ತಿಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ. ಸ್ಕೇಲೆಬಲ್, ನಿರ್ವಹಿಸಬಲ್ಲ, ಮತ್ತು ಸ್ವತಂತ್ರ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು ಹೇಗೆ ಎಂದು ತಿಳಿಯಿರಿ.

ವೆಬ್‌ಪ್ಯಾಕ್ 5 ನೊಂದಿಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್: ಮೈಕ್ರೋ-ಫ್ರಂಟೆಂಡ್‌ಗಳಿಗೆ ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ

ವೆಬ್ ಡೆವಲಪ್ಮೆಂಟ್‌ನ ನಿರಂತರವಾಗಿ ವಿಕಸಿಸುತ್ತಿರುವ ಕ್ಷೇತ್ರದಲ್ಲಿ, ದೊಡ್ಡ ಮತ್ತು ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು ಒಂದು ಸವಾಲಿನ ಕೆಲಸವಾಗಿದೆ. ಸಾಂಪ್ರದಾಯಿಕ ಏಕಶಿಲೆಯ ಆರ್ಕಿಟೆಕ್ಚರ್‌ಗಳು ಹೆಚ್ಚಾಗಿ ಅಭಿವೃದ್ಧಿ ಸಮಯ, ನಿಯೋಜನೆಯಲ್ಲಿನ ಅಡಚಣೆಗಳು, ಮತ್ತು ಕೋಡ್ ಗುಣಮಟ್ಟವನ್ನು ನಿರ್ವಹಿಸುವಲ್ಲಿ ಸವಾಲುಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತವೆ. ಈ ಸವಾಲುಗಳನ್ನು ಪರಿಹರಿಸಲು ಮೈಕ್ರೋ-ಫ್ರಂಟೆಂಡ್‌ಗಳು ಒಂದು ಶಕ್ತಿಯುತ ಆರ್ಕಿಟೆಕ್ಚರಲ್ ಮಾದರಿಯಾಗಿ ಹೊರಹೊಮ್ಮಿವೆ, ಇದು ತಂಡಗಳಿಗೆ ಒಂದು ದೊಡ್ಡ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ಸ್ವತಂತ್ರ ಭಾಗಗಳನ್ನು ನಿರ್ಮಿಸಲು ಮತ್ತು ನಿಯೋಜಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಮೈಕ್ರೋ-ಫ್ರಂಟೆಂಡ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಅತ್ಯಂತ ಭರವಸೆಯ ತಂತ್ರಜ್ಞಾನಗಳಲ್ಲಿ ಒಂದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್, ಇದನ್ನು ವೆಬ್‌ಪ್ಯಾಕ್ 5 ರಲ್ಲಿ ಪರಿಚಯಿಸಲಾಗಿದೆ.

ಮೈಕ್ರೋ-ಫ್ರಂಟೆಂಡ್‌ಗಳು ಎಂದರೇನು?

ಮೈಕ್ರೋ-ಫ್ರಂಟೆಂಡ್‌ಗಳು ಒಂದು ಆರ್ಕಿಟೆಕ್ಚರಲ್ ಶೈಲಿಯಾಗಿದ್ದು, ಇದರಲ್ಲಿ ಫ್ರಂಟೆಂಡ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸಣ್ಣ, ಸ್ವತಂತ್ರ ಘಟಕಗಳಾಗಿ ವಿಭಜಿಸಲಾಗುತ್ತದೆ, ಇವುಗಳನ್ನು ವಿವಿಧ ತಂಡಗಳು ಸ್ವಾಯತ್ತವಾಗಿ ಅಭಿವೃದ್ಧಿಪಡಿಸಬಹುದು, ಪರೀಕ್ಷಿಸಬಹುದು, ಮತ್ತು ನಿಯೋಜಿಸಬಹುದು. ಪ್ರತಿಯೊಂದು ಮೈಕ್ರೋ-ಫ್ರಂಟೆಂಡ್ ಒಂದು ನಿರ್ದಿಷ್ಟ ವ್ಯವಹಾರ ಡೊಮೇನ್ ಅಥವಾ ವೈಶಿಷ್ಟ್ಯಕ್ಕೆ ಜವಾಬ್ದಾರವಾಗಿರುತ್ತದೆ, ಮತ್ತು ಅವುಗಳನ್ನು ರನ್‌ಟೈಮ್‌ನಲ್ಲಿ ಒಟ್ಟಿಗೆ ಸೇರಿಸಿ ಸಂಪೂರ್ಣ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ರೂಪಿಸಲಾಗುತ್ತದೆ.

ಇದನ್ನು ಒಂದು ಕಂಪನಿಯಂತೆ ಯೋಚಿಸಿ: ಒಂದು ದೊಡ್ಡ ಅಭಿವೃದ್ಧಿ ತಂಡವನ್ನು ಹೊಂದುವ ಬದಲು, ನೀವು ನಿರ್ದಿಷ್ಟ ಕ್ಷೇತ್ರಗಳ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುವ ಅನೇಕ ಸಣ್ಣ ತಂಡಗಳನ್ನು ಹೊಂದಿರುತ್ತೀರಿ. ಪ್ರತಿಯೊಂದು ತಂಡವು ಸ್ವತಂತ್ರವಾಗಿ ಕೆಲಸ ಮಾಡಬಹುದು, ಇದು ವೇಗದ ಅಭಿವೃದ್ಧಿ ಚಕ್ರಗಳಿಗೆ ಮತ್ತು ಸುಲಭ ನಿರ್ವಹಣೆಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಅಮೆಜಾನ್‌ನಂತಹ ದೊಡ್ಡ ಇ-ಕಾಮರ್ಸ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಅನ್ನು ಪರಿಗಣಿಸಿ; ವಿವಿಧ ತಂಡಗಳು ಉತ್ಪನ್ನ ಕ್ಯಾಟಲಾಗ್, ಶಾಪಿಂಗ್ ಕಾರ್ಟ್, ಚೆಕ್‌ಔಟ್ ಪ್ರಕ್ರಿಯೆ ಮತ್ತು ಬಳಕೆದಾರ ಖಾತೆ ನಿರ್ವಹಣೆಯನ್ನು ನಿರ್ವಹಿಸಬಹುದು. ಇವೆಲ್ಲವೂ ಸ್ವತಂತ್ರ ಮೈಕ್ರೋ-ಫ್ರಂಟೆಂಡ್‌ಗಳಾಗಿರಬಹುದು.

ಮೈಕ್ರೋ-ಫ್ರಂಟೆಂಡ್‌ಗಳ ಪ್ರಯೋಜನಗಳು:

ಮೈಕ್ರೋ-ಫ್ರಂಟೆಂಡ್‌ಗಳ ಸವಾಲುಗಳು:

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ಎಂದರೇನು?

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ವೆಬ್‌ಪ್ಯಾಕ್ 5 ರ ಒಂದು ವೈಶಿಷ್ಟ್ಯವಾಗಿದ್ದು, ಇದು ಪ್ರತ್ಯೇಕವಾಗಿ ಕಂಪೈಲ್ ಮಾಡಿದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ನಡುವೆ ರನ್‌ಟೈಮ್‌ನಲ್ಲಿ ಕೋಡ್ ಹಂಚಿಕೊಳ್ಳಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಭಾಗಗಳನ್ನು "ಮಾಡ್ಯೂಲ್‌ಗಳಾಗಿ" ಬಹಿರಂಗಪಡಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಇವುಗಳನ್ನು ಇತರ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು npm ನಂತಹ ಕೇಂದ್ರ ರೆಪೊಸಿಟರಿಗೆ ಪ್ರಕಟಿಸುವ ಅಗತ್ಯವಿಲ್ಲದೆ ಬಳಸಿಕೊಳ್ಳಬಹುದು.

ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ಅನ್ನು ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಫೆಡರೇಟೆಡ್ ಪರಿಸರ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸುವ ಒಂದು ಮಾರ್ಗವೆಂದು ಯೋಚಿಸಿ, ಅಲ್ಲಿ ಪ್ರತಿಯೊಂದು ಅಪ್ಲಿಕೇಶನ್ ತನ್ನದೇ ಆದ ಕಾರ್ಯವನ್ನು ಕೊಡುಗೆ ನೀಡಬಹುದು ಮತ್ತು ಇತರ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಂದ ಕಾರ್ಯವನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು. ಇದು ಬಿಲ್ಡ್-ಟೈಮ್ ಅವಲಂಬನೆಗಳ ಅಗತ್ಯವನ್ನು ನಿವಾರಿಸುತ್ತದೆ ಮತ್ತು ನಿಜವಾದ ಸ್ವತಂತ್ರ ನಿಯೋಜನೆಗಳಿಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಉದಾಹರಣೆಗೆ, ಒಂದು ಡಿಸೈನ್ ಸಿಸ್ಟಮ್ ತಂಡವು UI ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಮಾಡ್ಯೂಲ್‌ಗಳಾಗಿ ಬಹಿರಂಗಪಡಿಸಬಹುದು, ಮತ್ತು ವಿವಿಧ ಅಪ್ಲಿಕೇಶನ್ ತಂಡಗಳು ಈ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಡಿಸೈನ್ ಸಿಸ್ಟಮ್ ಅಪ್ಲಿಕೇಶನ್‌ನಿಂದ ನೇರವಾಗಿ ಬಳಸಿಕೊಳ್ಳಬಹುದು, ಅವುಗಳನ್ನು npm ಪ್ಯಾಕೇಜ್‌ಗಳಾಗಿ ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡುವ ಅಗತ್ಯವಿಲ್ಲದೆ. ಡಿಸೈನ್ ಸಿಸ್ಟಮ್ ತಂಡವು ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಿದಾಗ, ಬದಲಾವಣೆಗಳು ಎಲ್ಲಾ ಬಳಸುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪ್ರತಿಫಲಿಸುತ್ತದೆ.

ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್‌ನಲ್ಲಿನ ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು:

ವೆಬ್‌ಪ್ಯಾಕ್ 5 ನೊಂದಿಗೆ ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ಅನ್ನು ಸ್ಥಾಪಿಸುವುದು: ಒಂದು ಪ್ರಾಯೋಗಿಕ ಮಾರ್ಗದರ್ಶಿ

ವೆಬ್‌ಪ್ಯಾಕ್ 5 ನೊಂದಿಗೆ ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ಅನ್ನು ಸ್ಥಾಪಿಸುವ ಒಂದು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಯನ್ನು ನೋಡೋಣ. ನಾವು ಎರಡು ಸರಳ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸುತ್ತೇವೆ: ಒಂದು ಹೋಸ್ಟ್ ಅಪ್ಲಿಕೇಶನ್ ಮತ್ತು ಒಂದು ರಿಮೋಟ್ ಅಪ್ಲಿಕೇಶನ್. ರಿಮೋಟ್ ಅಪ್ಲಿಕೇಶನ್ ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಬಹಿರಂಗಪಡಿಸುತ್ತದೆ, ಮತ್ತು ಹೋಸ್ಟ್ ಅಪ್ಲಿಕೇಶನ್ ಅದನ್ನು ಬಳಸುತ್ತದೆ.

1. ಪ್ರಾಜೆಕ್ಟ್ ಸೆಟಪ್

ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ ಎರಡು ಪ್ರತ್ಯೇಕ ಡೈರೆಕ್ಟರಿಗಳನ್ನು ರಚಿಸಿ: `host` ಮತ್ತು `remote`.

```bash mkdir host remote cd host npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom cd ../remote npm init -y npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev npm install react react-dom ```

2. ರಿಮೋಟ್ ಅಪ್ಲಿಕೇಶನ್ ಕಾನ್ಫಿಗರೇಶನ್

`remote` ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ, ಈ ಕೆಳಗಿನ ಫೈಲ್‌ಗಳನ್ನು ರಚಿಸಿ:

src/index.js:

```javascript import React from 'react'; import ReactDOM from 'react-dom/client'; import RemoteComponent from './RemoteComponent'; const App = () => (

Remote Application

); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

src/RemoteComponent.jsx:

```javascript import React from 'react'; const RemoteComponent = () => (

This is a Remote Component!

Rendered from the Remote Application.

); export default RemoteComponent; ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3001, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'remote', filename: 'remoteEntry.js', exposes: { './RemoteComponent': './src/RemoteComponent', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

ಮೂಲ HTML ರಚನೆಯೊಂದಿಗೆ `public/index.html` ಅನ್ನು ರಚಿಸಿ. ಮುಖ್ಯವಾಗಿ `

` ಇರಬೇಕು.

3. ಹೋಸ್ಟ್ ಅಪ್ಲಿಕೇಶನ್ ಕಾನ್ಫಿಗರೇಶನ್

`host` ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ, ಈ ಕೆಳಗಿನ ಫೈಲ್‌ಗಳನ್ನು ರಚಿಸಿ:

  • `src/index.js`: ಅಪ್ಲಿಕೇಶನ್‌ನ ಎಂಟ್ರಿ ಪಾಯಿಂಟ್.
  • `webpack.config.js`: ವೆಬ್‌ಪ್ಯಾಕ್ ಕಾನ್ಫಿಗರೇಶನ್ ಫೈಲ್.

src/index.js:

```javascript import React, { Suspense } from 'react'; import ReactDOM from 'react-dom/client'; const RemoteComponent = React.lazy(() => import('remote/RemoteComponent')); const App = () => (

Host Application

Loading Remote Component...
}>
); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); ```

webpack.config.js:

```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { port: 3000, static: { directory: path.join(__dirname, 'dist'), }, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env'], }, }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'host', remotes: { remote: 'remote@http://localhost:3001/remoteEntry.js', }, shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true }, }, }), new HtmlWebpackPlugin({ template: './public/index.html', }), ], resolve: { extensions: ['.js', '.jsx'], }, }; ```

ಮೂಲ HTML ರಚನೆಯೊಂದಿಗೆ `public/index.html` ಅನ್ನು ರಚಿಸಿ (ರಿಮೋಟ್ ಆಪ್‌ನಂತೆಯೇ). ಮುಖ್ಯವಾಗಿ `

` ಇರಬೇಕು.

4. ಬಾಬೆಲ್ (Babel) ಅನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ

`host` ಮತ್ತು `remote` ಎರಡೂ ಡೈರೆಕ್ಟರಿಗಳಲ್ಲಿ, ಬಾಬೆಲ್ ಡಿಪೆಂಡೆನ್ಸಿಗಳನ್ನು ಇನ್‌ಸ್ಟಾಲ್ ಮಾಡಿ:

```bash npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader ```

5. ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರನ್ ಮಾಡಿ

`host` ಮತ್ತು `remote` ಎರಡೂ ಡೈರೆಕ್ಟರಿಗಳಲ್ಲಿ, `package.json` ಗೆ ಈ ಕೆಳಗಿನ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಸೇರಿಸಿ:

```json "scripts": { "start": "webpack serve" } ```

ಈಗ, ಎರಡೂ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಪ್ರಾರಂಭಿಸಿ:

```bash cd remote npm start cd ../host npm start ```

ನಿಮ್ಮ ಬ್ರೌಸರ್ ತೆರೆದು `http://localhost:3000` ಗೆ ಹೋಗಿ. ನೀವು ಹೋಸ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ಒಳಗೆ ರಿಮೋಟ್ ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರ್ ಆಗಿರುವುದನ್ನು ನೋಡಬೇಕು.

ಪ್ರಮುಖ ಕಾನ್ಫಿಗರೇಶನ್ ಆಯ್ಕೆಗಳ ವಿವರಣೆ:

ಸುಧಾರಿತ ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ತಂತ್ರಗಳು

ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ಇನ್ನೂ ಹೆಚ್ಚು ಅತ್ಯಾಧುನಿಕ ಮೈಕ್ರೋ-ಫ್ರಂಟೆಂಡ್ ಆರ್ಕಿಟೆಕ್ಚರ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುವ ಅನೇಕ ಸುಧಾರಿತ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನೀಡುತ್ತದೆ.

ಡೈನಾಮಿಕ್ ರಿಮೋಟ್‌ಗಳು

ವೆಬ್‌ಪ್ಯಾಕ್ ಕಾನ್ಫಿಗರೇಶನ್‌ನಲ್ಲಿ ರಿಮೋಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ URL ಗಳನ್ನು ಹಾರ್ಡ್‌ಕೋಡ್ ಮಾಡುವ ಬದಲು, ನೀವು ಅವುಗಳನ್ನು ರನ್‌ಟೈಮ್‌ನಲ್ಲಿ ಡೈನಾಮಿಕ್ ಆಗಿ ಲೋಡ್ ಮಾಡಬಹುದು. ಇದು ಹೋಸ್ಟ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪುನರ್ನಿರ್ಮಿಸದೆಯೇ ರಿಮೋಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಸ್ಥಳವನ್ನು ಸುಲಭವಾಗಿ ನವೀಕರಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಉದಾಹರಣೆಗೆ, ನೀವು ರಿಮೋಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ URL ಗಳನ್ನು ಕಾನ್ಫಿಗರೇಶನ್ ಫೈಲ್ ಅಥವಾ ಡೇಟಾಬೇಸ್‌ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಬಹುದು ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಅವುಗಳನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಲೋಡ್ ಮಾಡಬಹುದು.

```javascript // In webpack.config.js remotes: { remote: `promise new Promise(resolve => { const urlParams = new URLSearchParams(window.location.search); const remoteUrl = urlParams.get('remote'); // Assume remoteUrl is something like 'http://localhost:3001/remoteEntry.js' const script = document.createElement('script'); script.src = remoteUrl; script.onload = () => { // the key of module federation is that the remote app is // available using the name in the remote resolve(window.remote); }; document.head.appendChild(script); })`, }, ```

ಈಗ ನೀವು ಹೋಸ್ಟ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು `?remote=http://localhost:3001/remoteEntry.js` ಎಂಬ ಕ್ವೆರಿ ಪ್ಯಾರಾಮೀಟರ್‌ನೊಂದಿಗೆ ಲೋಡ್ ಮಾಡಬಹುದು.

ಆವೃತ್ತಿಯ ಹಂಚಿದ ಮಾಡ್ಯೂಲ್‌ಗಳು

ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ಹಂಚಿದ ಮಾಡ್ಯೂಲ್‌ಗಳ ಆವೃತ್ತಿ ಮತ್ತು ಡಿಡ್ಯೂಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿಭಾಯಿಸುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಪ್ರತಿಯೊಂದು ಮಾಡ್ಯೂಲ್‌ನ ಹೊಂದಾಣಿಕೆಯಾಗುವ ಕೇವಲ ಒಂದು ಆವೃತ್ತಿ ಮಾತ್ರ ಲೋಡ್ ಆಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಇದು ಅನೇಕ ಅವಲಂಬನೆಗಳನ್ನು ಹೊಂದಿರುವ ದೊಡ್ಡ ಮತ್ತು ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ ವಿಶೇಷವಾಗಿ ಮುಖ್ಯವಾಗಿದೆ.

ನೀವು ವೆಬ್‌ಪ್ಯಾಕ್ ಕಾನ್ಫಿಗರೇಶನ್‌ನಲ್ಲಿ ಪ್ರತಿಯೊಂದು ಹಂಚಿದ ಮಾಡ್ಯೂಲ್‌ನ ಆವೃತ್ತಿ ಶ್ರೇಣಿಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು.

```javascript // In webpack.config.js shared: { react: { singleton: true, eager: true, requiredVersion: '^18.0.0' }, 'react-dom': { singleton: true, eager: true, requiredVersion: '^18.0.0' }, }, ```

ಕಸ್ಟಮ್ ಮಾಡ್ಯೂಲ್ ಲೋಡರ್‌ಗಳು

ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ನಿಮಗೆ ಕಸ್ಟಮ್ ಮಾಡ್ಯೂಲ್ ಲೋಡರ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಅನುಮತಿಸುತ್ತದೆ, ಇವುಗಳನ್ನು ವಿವಿಧ ಮೂಲಗಳಿಂದ ಅಥವಾ ವಿವಿಧ ಸ್ವರೂಪಗಳಲ್ಲಿ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಬಳಸಬಹುದು. ಇದು CDN ನಿಂದ ಅಥವಾ ಕಸ್ಟಮ್ ಮಾಡ್ಯೂಲ್ ರಿಜಿಸ್ಟ್ರಿಯಿಂದ ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಉಪಯುಕ್ತವಾಗಬಹುದು.

ಮೈಕ್ರೋ-ಫ್ರಂಟೆಂಡ್‌ಗಳ ನಡುವೆ ಸ್ಟೇಟ್ (State) ಹಂಚಿಕೆ

ಮೈಕ್ರೋ-ಫ್ರಂಟೆಂಡ್ ಆರ್ಕಿಟೆಕ್ಚರ್‌ಗಳ ಸವಾಲುಗಳಲ್ಲಿ ಒಂದು, ವಿವಿಧ ಮೈಕ್ರೋ-ಫ್ರಂಟೆಂಡ್‌ಗಳ ನಡುವೆ ಸ್ಟೇಟ್ (ಸ್ಥಿತಿ) ಹಂಚಿಕೊಳ್ಳುವುದು. ಈ ಸವಾಲನ್ನು ಪರಿಹರಿಸಲು ನೀವು ತೆಗೆದುಕೊಳ್ಳಬಹುದಾದ ಹಲವಾರು ವಿಧಾನಗಳಿವೆ:

ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್‌ನೊಂದಿಗೆ ಮೈಕ್ರೋ-ಫ್ರಂಟೆಂಡ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್‌ನೊಂದಿಗೆ ಮೈಕ್ರೋ-ಫ್ರಂಟೆಂಡ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವಾಗ ನೆನಪಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳಬೇಕಾದ ಕೆಲವು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಇಲ್ಲಿವೆ:

ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್‌ನ ನೈಜ-ಪ್ರಪಂಚದ ಉದಾಹರಣೆಗಳು

ನಿರ್ದಿಷ್ಟ ಕೇಸ್ ಸ್ಟಡಿಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಗೌಪ್ಯವಾಗಿದ್ದರೂ, ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ಅತ್ಯಂತ ಉಪಯುಕ್ತವಾಗಬಹುದಾದ ಕೆಲವು ಸಾಮಾನ್ಯೀಕರಿಸಿದ ಸನ್ನಿವೇಶಗಳು ಇಲ್ಲಿವೆ:

ತೀರ್ಮಾನ

ವೆಬ್‌ಪ್ಯಾಕ್ 5 ರಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ಮೈಕ್ರೋ-ಫ್ರಂಟೆಂಡ್ ಆರ್ಕಿಟೆಕ್ಚರ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಶಕ್ತಿಯುತ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಪ್ರತ್ಯೇಕವಾಗಿ ಕಂಪೈಲ್ ಮಾಡಿದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ನಡುವೆ ರನ್‌ಟೈಮ್‌ನಲ್ಲಿ ಕೋಡ್ ಹಂಚಿಕೊಳ್ಳಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಸ್ವತಂತ್ರ ನಿಯೋಜನೆಗಳು, ತಂತ್ರಜ್ಞಾನ ವೈವಿಧ್ಯತೆ ಮತ್ತು ಸುಧಾರಿತ ತಂಡದ ಸ್ವಾಯತ್ತತೆಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ ವಿವರಿಸಿರುವ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ಸ್ಕೇಲೆಬಲ್, ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ನವೀನ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನೀವು ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ಅನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು.

ಫ್ರಂಟೆಂಡ್ ಅಭಿವೃದ್ಧಿಯ ಭವಿಷ್ಯವು ನಿಸ್ಸಂದೇಹವಾಗಿ ಮಾಡ್ಯುಲರ್ ಮತ್ತು ವಿತರಿಸಿದ ಆರ್ಕಿಟೆಕ್ಚರ್‌ಗಳತ್ತ ವಾಲುತ್ತಿದೆ. ಮಾಡ್ಯೂಲ್ ಫೆಡರೇಶನ್ ಈ ಆಧುನಿಕ ವ್ಯವಸ್ಥೆಗಳನ್ನು ನಿರ್ಮಿಸಲು ಒಂದು ನಿರ್ಣಾಯಕ ಸಾಧನವನ್ನು ಒದಗಿಸುತ್ತದೆ, ತಂಡಗಳಿಗೆ ಹೆಚ್ಚಿನ ವೇಗ, ನಮ್ಯತೆ ಮತ್ತು ಸ್ಥಿತಿಸ್ಥಾಪಕತ್ವದೊಂದಿಗೆ ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ತಂತ್ರಜ್ಞಾನವು ಪ್ರೌಢವಾಗುತ್ತಿದ್ದಂತೆ, ಇನ್ನೂ ಹೆಚ್ಚು ನವೀನ ಬಳಕೆಯ ಪ್ರಕರಣಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಹೊರಹೊಮ್ಮುವುದನ್ನು ನಾವು ನಿರೀಕ್ಷಿಸಬಹುದು.